<script lang="ts" setup>
import type { Video01ComponentMeta } from '@/definitions/type'
import CompStyle from '@/components/CompAttr/CompStyle.vue'
import ContainerMask from '@/components/CompAttr/ContainerMask.vue'
import { useCompRefs } from '@/hooks/useCompRefs'
import { useCompStyle } from '@/hooks/useCompStyle'
import { useUpload } from '@/hooks/useUpload'
import { Button, Input, message, RadioButton, RadioGroup, Space } from 'ant-design-vue'

defineOptions({
  name: 'Video01Attr',
  inheritAttrs: true,
})
const { activeRender } = useCompStyle<Video01ComponentMeta>()
const { uploadAction: uploadVideoPoster } = useUpload({
  successHandler({ url }) {
    activeRender.value!.config.cover = url
  },
  crop: true,
  cropOpts: {
    width: 1180,
    height: 664,
  },
})
const { uploadAction: uploadVideo } = useUpload({
  successHandler({ url }) {
    activeRender.value!.config.videoUrl = url
    // 上传视频后移除默认封面
    if (activeRender.value!.config.cover && !activeRender.value!.config.cover.startsWith('http')) {
      activeRender.value!.config.cover = ''
    }
  },
  type: 'video',
})
const { VideoPreviewModalRef } = useCompRefs()
function handlePreviewVideo() {
  if (!activeRender.value!.config.videoUrl) {
    message.info('请先上传视频文件')
    return 
  }
  if (VideoPreviewModalRef.value) {
    VideoPreviewModalRef.value.open({
      url: activeRender.value!.config.videoUrl,
    })
  }
}
</script>

<template>
  <div v-if="activeRender">
    <div class="mb-6">
      <div class="field-title">
        组件模板
      </div>
      <RadioGroup button-style="solid" :value="activeRender.config.template">
        <RadioButton v-for="item of activeRender.config.templateOptions" :key="item.value" :value="item.value">
          {{ item.label }}
        </RadioButton>
      </RadioGroup>
    </div>
    <div class="field-title">
      组件内容
    </div>
    <Space :size="20" direction="vertical" style="width: 100%;">
      <div class="field-control">
        <div class="field-label">
          视频标题
        </div>
        <Input
          v-model:value="activeRender.config.title" placeholder="请输入视频标题(选填)"
          :minlength="activeRender.config.titleRules?.min" :max-length="activeRender.config.titleRules?.max"
          :required="activeRender.config.titleRules?.required"
        />
      </div>
      <div class="field-control">
        <div class="field-label">
          视频文件
        </div>
        <div class="flex flex-row gap-2 items-start">
          <!-- 左侧图片 -->
          <div class="relative flex-none w-156px h-88px rounded overflow-hidden cursor-pointer video-image-wrap" :class="activeRender.config.videoUrl ? 'has-video' : ''">
            <video
              v-if="activeRender.config.videoUrl" :src="activeRender.config.videoUrl" :width="156" :height="88" preload="metadata"
              class="block w-156px h-88px object-contain"
            />
            <!-- 视频播放按钮 -->
            <img v-if="activeRender.config.videoUrl" src="/images/vidio-play-btn.png" :width="33" :height="33" class="video-play-btn">
            <img v-else src="/images/upload-video-placeholder.png" :width="32" :height="32" class="video-poster-placeholder">
            <ContainerMask class="image-wrap-mask" @click="uploadVideo" />
          </div>
          <!-- 右侧属性 -->
          <div class="flex-1 ">
            <Button type="primary" ghost size="small" style="font-size: 12px;" @click="handlePreviewVideo()">
              预览
            </Button>
            <div class="text-xs text-second-app mt-10">
              建议视频大小50MB
            </div>
          </div>
        </div>
      </div>
      <div class="field-control">
        <div class="field-label">
          视频封面
        </div>
        <div
          class="relative flex-none w-156px h-88px rounded overflow-hidden cursor-pointer video-poster-wrap"
          :class="activeRender.config.cover ? 'has-poster' : ''" @click="uploadVideoPoster"
        >
          <img
            v-if="activeRender.config.cover" :src="activeRender.config.cover" :width="156" :height="88"
            class="block w-156px h-88px object-cover"
          >
          <img v-else src="/images/upload-placeholder.png" :width="32" :height="32" class="video-poster-placeholder">
          <ContainerMask class="image-wrap-mask" />
        </div>
      </div>
    </Space>
    <CompStyle />
  </div>
</template>

<style lang="less" scoped>
.field-title {
  color: var(--app-text-color-main);
  @apply font-bold text-sm mb-14px;
}

.field-control {
  color: var(--app-text-color-main);
  @apply flex flex-col gap-2;

  .field-label {
    color: var(--app-text-color-second);
    @apply text-sm;
  }
}
.video-image-wrap.has-video:hover .image-wrap-mask {
  opacity: 1;
}
.video-image-wrap,
.video-poster-wrap {
  border-radius: 4px;
  border: 1px solid #DDD;
  background: #F5F7FA;
}

.video-poster-wrap.has-poster:hover .image-wrap-mask {
  opacity: 1;
}
.video-play-btn {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  @apply block w-33px h-33px object-contain absolute;
}
.video-poster-placeholder {
  margin: 28px auto;
  @apply block w-32px h-32px;
}
</style>
